<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://cdn.bootcdn.net/ajax/libs/single-spa/5.9.3/umd/single-spa.min.js"></script>
    <script>
      // single-spa 基于路由的微前端
      // 如何接入已经写好的应用，对于 single-spa 而言，需要改写子应用（添加接入协议）
      /**
       * 接入协议：
       * - bootstrap：子应用启动
       * - mount：子应用挂载
       * - unmount：子应用卸载
       */

      // cdn 的：singleSpa
      const { registerApplication, start } = singleSpa;
      // app1 模拟子应用
      const app1 = {
        // bootstrap可以是一个数组，也可以是一个函数（数组好处：可以同时编写多个函数），函数是一个 promise
        bootstrap: [async () => console.log("app1 bootstrap1"), async () => console.log("app1 bootstrap2")],
        mount: async () => {
          // createApp(App).mount(#root)
          console.log("app1 mount");
        },
        unmount: async () => {
          console.log("app1 unmount");
        },
      };

      const app2 = {
        bootstrap: async () => {
          console.log("app2 bootstrap");
        },
        mount: async () => {
          console.log("app2 mount");
        },
        unmount: async () => {
          console.log("app2 unmount");
        },
      };

      // 参数1：应用名 参数2：加载的那个应用（必须要返回一个promise） 3. 路由匹配规则
      registerApplication("app1", async () => app1, (location) => location.hash.startsWith("#/app1"))
      registerApplication("app2", async () => app2, (location) => location.hash.startsWith("#/app2"))
      start();
    </script>
  </body>
</html>
